<template>
  <div class = "wrapper">
    <swiper :options="swiperOption">
        <swiper-slide 
          v-for = "item of swiperList" 
          :key = "item.id">
            <img 
              :src = "item.imgUrl" 
              class = "swiperimg">
        </swiper-slide>
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
        <div class="swiper-scrollbar"   slot="scrollbar"></div>
        <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'homeSwiper',
  props:['swiperList'],
  data(){
      return{
        swiperOption:{
        pagination:'.swiper-pagination',
        loop:true,
        autoHeight: true,
        setWrapperSize :true,
        paginationClickable :true,
        prevButton:'.swiper-button-prev',
        nextButton:'.swiper-button-next',
        scrollbar:'.swiper-scrollbar',
        mousewheelControl : true,
        observeParents:true,
        },
        
      }
  }
  
}
</script>

<style lang = 'stylus' scoped>
.wrapper >>>.swiper-pagination-bullet 
  background red
.swiperimg
    width 100%

</style>